<template>
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<div class="ui container">
  <div class="ui inverted secondary stackable menu">
    <h2 style="font-size: 200%" class="ui teal header item">Blog</h2>
    <a href="/" :style="{'background-color': $store.state.o1}"><i style="font-size: 15px" class="mini home icon"></i>首页</a>
    <a href="/type" :style="{'background-color': $store.state.o2}"><i style="font-size: 15px" class="mini idea icon"></i>分类</a>
    <a href="/tag" :style="{'background-color': $store.state.o3}"><i style="font-size: 15px" class="mini tags icon"></i>标签</a>
    <a href="/archive" :style="{'background-color': $store.state.o4}"><i style="font-size: 15px" class="mini clone icon"></i>归档</a>
    <a href="/about" :style="{'background-color': $store.state.o5}"><i style="font-size: 15px" class="mini info icon"></i>关于我</a>
    <div class="search">
      <form name="search" action="#" method="post" target="_blank">
        <div>
          <input style="color: #2e383c; width: 80%" type="text" name="query" placeholder="Search....">
          <i style="width: 15%" onclick="document.forms['search'].submit()" class="search link icon"></i>
        </div>
      </form>
    </div>
  </div>
</div>
</nav>

<router-view/>

<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
  <div class="ui inverted divided stackable grid">
    <div class="three wide column">
      <div class="ui inverted link list">
        <div class="item">
          <img src="assets/images/wechat.png" class="ui rounded image" alt="" style="width: 110px">
        </div>
      </div>
    </div>
    <div class="three wide column" >
      <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
      <div id="newblog-container">
        <div class="ui inverted link list">
          <a href="#" target="_blank" class="item m-text-thin">用户故事（User Story）</a>
          <!--/*-->
          <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          <!--*/-->
        </div>
      </div>
    </div>
    <div class="three wide column">
      <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
      <div class="ui inverted link list">
        <a href="#" class="item m-text-thin"></a>
        <a href="#" class="item m-text-thin">QQ：1920459132</a>
      </div>
    </div>
    <div class="seven wide column">
      <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
      <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
    </div>
  </div>
  <div class="ui inverted section divider"></div>
  <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - <span >2017</span> Liuhandong Designed by Liuhandong</p>
</div>
</footer>
</template>
<script>
export default {
  name: "UserBase"
}
</script>
<style scoped>
</style>